<template>
  <div class="main-right">
    <LockScreen />
    <FullScreen />
    <SelecteLanuguage />
    <MenuSearch />
    <ColorPicker />
    <ThemeSettings />
    <userInfo />
  </div>
</template>

<script lang="ts" setup>
import userInfo from "../components/userInfo.vue";
import LockScreen from "../components/LockScreen.vue";
import FullScreen from "../components/FullScreen.vue";
import SelecteLanuguage from "../components/SelecteLanuguage.vue";
import MenuSearch from "../components/MenuSearch.vue";
import ColorPicker from "../components/ColorPicker.vue";
import ThemeSettings from "../components/ThemeSettings.vue";
</script>

<style lang="less" scoped>
.main-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 1;

  div {
    margin: 0 5px;

    &:nth-last-child(1) {
      margin-left: 10px;
    }
  }
}
</style>
